<template>
  <div class="video-play-back" :id="state.pid"></div>
</template>

<script setup>
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
const emit = defineEmits(["capImg"]);
const props = defineProps({
  vid: String,
  reportTime: String,
  Times: Array,
  url: "",
  capUrl: {
    type: Boolean,
    default: false,
  },
});
const state = reactive({
  pm: {},
  myPlugin: null,
  curIndex: 0,
  pid: "bk" + Math.floor(Math.random() * 1000) + 1,
});

const resize = () => {
  if (state.myPlugin) {
    setTimeout(() => {
      state.myPlugin.JS_Resize();
    }, 50);
  }
};

// 截图
const toCapImg = () => {
  state.myPlugin.JS_CapturePicture(
    state.curIndex,
    "smallImg",
    "JEPG",
    (imageData) => {
      emit("capImg", imageData);
    }
  );
};

const play = async (bT, eT) => {
  //  let et =
  //   dayjs(new Date(state.pm.endTime), "YYYY-MM-DDTHH:mm:ss") + ".000+08:00";
  // console.log("bt", bt);
  // console.log("et", et);
  if (!state.myPlugin) {
    await initPlayer();
    play();
    return;
  }
  let url = props.url || "";
  if (!url) return;

  let bt = dayjs(new Date(props.reportTime))
    .subtract(60, "second")
    .format("YYYY-MM-DDTHH:mm:ss.SSSZ");
  let et = dayjs(new Date(props.reportTime)).format("YYYY-MM-DDTHH:mm:ss.SSSZ");
  if (url != "") {
    state.myPlugin
      .JS_Play(
        url,
        { playURL: url, mode: 1, beginTime: bt, endTime: et },
        0,
        bt,
        et
      )
      .then(
        () => {
          resize();
          if (props.capUrl) {
            setTimeout(() => {
              toCapImg();
            }, 3000);
          }
        },
        (err) => {
          play();
        }
      );
  } else {
    ElMessage.error("未获取到播放地址");
  }
};
const initPlayer = () => {
  if (state.myPlugin != null) return;
  state.myPlugin = new JSPlugin({
    szId: state.pid, //需要英文字母开头，唯一性，必填
    szBasePath: "/js/", // 必填,与h5player.min.js的引用目录一致
    bSupporDoubleClickFull: false, //是否支持双击全屏，默认true
    // 分屏播放，默认最大分屏4*4
    iMaxSplit: 1,
    iCurrentSplit: 1,
  });

  state.myPlugin.JS_SetWindowControlCallback({
    windowEventSelect: function (index) {
      //插件选中窗口回调
      state.curIndex = index;
    },
    pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
      //插件错误回调
      console.error(`window-${iWndIndex}, errorCode: ${iErrorCode}`, oError);
      //ElMessage.error(`播放失败, 错误码: ${iErrorCode}`);
      play();
    },
    windowFullCcreenChange: function (bFull) {
      //全屏切换回调
      state.myPlugin.JS_Resize();
    },
  });
};
const seek = (bt) => {
  let et =
    dayjs(new Date(state.pm.endTime), "YYYY-MM-DDTHH:mm:ss") + ".000+08:00";
  console.log("bt", bt);
  console.log("et", et);
  play(bt, et);
  // if (state.myPlugin) {
  //   state.myPlugin.JS_Seek(state.curIndex, bt, et).then(
  //     () => {
  //       console.info("JS_Seek success");

  //     },
  //     (err) => {
  //       ElMessage.success("定位失败,错误码：" + err);
  //     }
  //   );
  // }
};
defineExpose({
  seek,
});
const destoryPlayer = () => {
  if (state.myPlugin) {
    state.myPlugin.JS_StopRealPlayAll();
    state.myPlugin.JS_DestroyWorker();
    state.myPlugin = null;
  }
};

watch(
  () => props.vid,
  (newval) => {
    if (newval != null && newval != "") {
      play();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

watch(
  () => props.url,
  (newval) => {
    if (newval != null && newval != "") {
      play();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

onMounted(() => {
  initPlayer();
});
//注销时 销毁组件
onBeforeUnmount(() => {
  destoryPlayer();
});
</script>

<style lang="scss" scoped>
.video-play-back {
  width: 100%;
  height: 100%;
  // width: 200px !important;
  // height: 100px !important;
  // border: 1px solid yellow;
}
</style>
